Often when you are creating templates and images, you have a need for
"hot spots" or linking areas on the image. When there is no special effects
needed associated with specific button symbols, a simple invisible button
will work on each link using the same button helps conserve in file size. In
this tutorial you will create a simple text menu invisible links over each
word.
1. Unzip the project file using winzip or winrar. Open the project
file by clicking file => Open and locate your invisbuttons.fla. You will see
an fla website template that is just the graphics for the top and a side
menu.
2. This template needs hot spots over the menu items. To do this we need
to make an invisible button. Click Insert=> New symbol. Set the symbol as
name = invisiblebutton
Behavior = Button.
3.
Inside the button symbol, you will see the button timeline. It consists of
4 possible frames, Up. Over, Down, Hit. If you wanted the button to
display graphics in the up over or down stage you can insert them. However,
in this case we just want to define a hit area that is invisible. Click in
the hit frame and press your F6 key to insert a key frame.
4.
Select your rectangle tool from your toolbox. Set any stroke and fill color,
as lo0ng as there is one. Draw a rectangle on the stage for the hit frame of
the button.
5. Click back on Scene 1 at the status bar under the timeline. Make sure
the buttons layer is highlighted on your timeline.
6.
Open your library (F11) and drag out an instance of your invisiblebutton
onto the stage. It will appear blue and semi transparent. This is your hit
area and will show up as transparent on your final movie.
7. Drag the button instance over your top button. Select your transform
tool and scale the button to fit over the home menu item.
8.
Grab your arrow tool. Holding down your alt key select and drag the button
down to the games menu item. The alt click-drag with the arrow tool should
duplicate your button.
9. Holding down your alt key select and drag the button down to the Chat
menu item. Release your mouse and alt key.
10. Holding down your alt key select and drag the button down to the
schedule menu item. Release your mouse and alt key.
11. Holding down your alt key select and drag the button down to the
Links menu item.
12. Test your movie by clicking control=> test movie. When you mouse over
the menu items, your cursor changes to a hand indicating a hot spot. Save
your movie
Additional Tutorials based on this Menu template are coming for
3.
Inside the button symbol, you will see the button timeline. It consists of
4 possible frames, Up. Over, Down, Hit. If you wanted the button to
display graphics in the up over or down stage you can insert them. However,
in this case we just want to define a hit area that is invisible. Click in
the hit frame and press your F6 key to insert a key frame.
4.
Select your rectangle tool from your toolbox. Set any stroke and fill color,
as lo0ng as there is one. Draw a rectangle on the stage for the hit frame of
the button.
6.
Open your library (F11) and drag out an instance of your invisiblebutton
onto the stage. It will appear blue and semi transparent. This is your hit
area and will show up as transparent on your final movie.
8.
Grab your arrow tool. Holding down your alt key select and drag the button
down to the games menu item. The alt click-drag with the arrow tool should
duplicate your button.